<template>
  <div class="container">
    <div class="plugins-tips">
      vue-schart：vue.js封装sChart.js的图表组件。 访问地址：
      <a href="https://github.com/lin-xin/vue-schart" target="_blank">vue-schart</a>
    </div>
    <div v-if="showCharts">
      <el-card class="mgb20" shadow="hover">
        <template #header>
          <div class="content-title">柱状图</div>
        </template>
        <schart class="schart" canvasId="bar" :options="options1"></schart>
      </el-card>
      <el-card class="mgb20" shadow="hover">
        <template #header>
          <div class="content-title">折线图</div>
        </template>
        <schart class="schart" canvasId="line" :options="options2"></schart>
      </el-card>
      <el-card class="mgb20" shadow="hover">
        <template #header>
          <div class="content-title">饼状图</div>
        </template>
        <schart class="schart" canvasId="pie" :options="options3"></schart>
      </el-card>
      <el-card class="mgb20" shadow="hover">
        <template #header>
          <div class="content-title">环形图</div>
        </template>
        <schart class="schart" canvasId="ring" :options="options4"></schart>
      </el-card>
    </div>
    <div v-else>图表加载中...</div>
  </div>
</template>

<script setup lang="ts" name="schart">
import { ref, onMounted } from 'vue';

// 初始化时设为false，确保在客户端环境再加载图表组件
const showCharts = ref(false);

// 使用动态导入确保只在客户端加载
let Schart;
onMounted(async () => {
  try {
    const module = await import('vue-schart');
    Schart = module.default;
    // 确保在下一个tick渲染图表组件
    await new Promise(resolve => setTimeout(resolve, 0));
    showCharts.value = true;
  } catch (error) {
    console.error('Failed to load vue-schart:', error);
  }
});

const options1 = {
  type: 'bar',
  title: {
    text: '最近一周各品类销售图',
  },
  colorList: ['#3f51b5', '#009688', '#f44336', '#00bcd4', '#1ABC9C'],
  labels: ['周一', '周二', '周三', '周四', '周五'],
  datasets: [
    {
      label: '家电',
      data: [234, 278, 270, 190, 230],
    },
    {
      label: '百货',
      data: [164, 178, 190, 135, 160],
    },
    {
      label: '食品',
      data: [144, 198, 150, 235, 120],
    },
  ],
};
const options2 = {
  type: 'line',
  title: {
    text: '最近几个月各品类销售趋势图',
  },
  colorList: ['#3f51b5', '#009688', '#f44336', '#00bcd4', '#1ABC9C'],
  labels: ['6月', '7月', '8月', '9月', '10月'],
  datasets: [
    {
      label: '家电',
      data: [234, 278, 270, 190, 230],
    },
    {
      label: '百货',
      data: [164, 178, 150, 135, 160],
    },
    {
      label: '食品',
      data: [114, 138, 200, 235, 190],
    },
  ],
};
const options3 = {
  type: 'pie',
  title: {
    text: '服装品类销售饼状图',
  },
  legend: {
    position: 'left',
  },
  colorList: ['#2196f3', '#673ab7', '#009688', '#1ABC9C', '#3f51b5', '#f44336', '#00bcd4'],
  labels: ['T恤', '牛仔裤', '连衣裙', '毛衣', '七分裤', '短裙', '羽绒服'],
  datasets: [
    {
      data: [334, 278, 190, 235, 260, 200, 141],
    },
  ],
};
const options4 = {
  type: 'ring',
  title: {
    text: '环形三等分',
  },
  showValue: false,
  legend: {
    position: 'bottom',
    bottom: 40,
  },
  colorList: ['#3f51b5', '#009688', '#f44336', '#00bcd4', '#1ABC9C'],
  labels: ['vue', 'react', 'angular'],
  datasets: [
    {
      data: [500, 500, 500],
    },
  ],
};
</script>

<style scoped>
.schart {
  width: 100%;
  height: 400px;
}

.content-title {
  font-weight: 400;
  font-size: 22px;
  color: #1f2f3d;
}
</style>
